<template>
	<view>
		<view class="driver-center-container">
			<!-- 头像基本信息 -->
			<view class="user-info">
				<u-avatar :src="avatar" mode="circle" size="large" @click="enterUpdateInfo()"></u-avatar>
				<view class="basic-info">
					<text>罗光平</text>
					<text>111</text>
				</view>
				<text class="text-update" @click="toUpdate">修改信息></text>
			</view>

			<!-- 订单量，收入，公里数等 -->
			<view class="day-info" :style="{ backgroundColor: dynamicColor }">
				<view class="total-money">{{totalMoney}}元</view>
				<!-- <text>{{totalMoney}}元</text> -->
				<!-- <u-gap height="10" bg-color="transparent"></u-gap> -->
				<u-grid :col="3" :border="false">
					<u-grid-item :bg-color="dynamicColor">
						<text>今日订单量</text>
						<view class="grid-text">1000</view>
					</u-grid-item>
					<u-grid-item :bg-color="dynamicColor">
						<text>今日流水</text>
						<view class="grid-text">9832.00</view>
					</u-grid-item>
					<u-grid-item :bg-color="dynamicColor">
						<text>今日公里数</text>
						<view class="grid-text">80.12</view>
					</u-grid-item>
				</u-grid>
			</view>

			<!-- 服务列表盒子 -->
			<view class="server-card-list">
				<!-- 各服务 -->
				<!-- 订单 -->
				<view class="server-card">
					<text class="server-card-text">我的订单</text>
					<u-line  class="u-line"/>
					<u-grid :col="4" @click="navigateToOrder(index)" :border="false">
						<u-grid-item>
							<image style="width:25px;height:25px" src="../../static/images/all-order0.png">
								<view class="grid-text">全部订单</view>
						</u-grid-item>
						<u-grid-item>
							<image style="width:25px;height:25px" src="../../static/images/cancel-order0.png">
								<view class="grid-text">已取消</view>
						</u-grid-item>
						<u-grid-item>
							<image style="width:25px;height:25px" src="../../static/images/unpay-order0.png">
								<view class="grid-text">未付款</view>
						</u-grid-item>
						<u-grid-item>
							<image style="width:25px;height:25px" src="../../static/images/over-order0.png">
								<view class="grid-text">已完成</view>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 其他 -->
				<view class="server-card">
					<text class="server-card-text">其他服务</text>
					<u-line  class="u-line"/>
					<u-grid :col="4" :border="false">
						<u-grid-item @click="navigateToPage(1)">
							<u-icon name="edit-pen" :size="46"></u-icon>
							<view class="grid-text">我的评价</view>
						</u-grid-item>
						<u-grid-item @click="navigateToPage(2)">
							<u-icon name="car-fill" :size="46"></u-icon>
							<view class="grid-text">我的车辆</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">沙漏</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">沙漏</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="hourglass" :size="46"></u-icon>
							<view class="grid-text">沙漏</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<u-tabbar v-model="current" :list="tabBarList" :selected-color="activeColor" :border-style="inactiveColor"
		  :border-top="borderTop" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//导航信息：-----------------------------------
				title: '司机个人中心', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
				tabBarList: this.$store.state.dynamicTabbar, // 导航栏的列表项，来源于Vuex状态管理中的dynamicTabbar
				current: 1, // 当前激活的导航项的索引，0表示第一个导航项
				borderTop: true, // 控制是否有顶部边框，true表示有边框
				inactiveColor: 'black', // 未激活的TabBarItem的颜色
				activeColor: 'red' ,// 激活的TabBarItem的颜色
				//-----------------------------------{
				avatar: require("@/static/images/daifu.png"),
				totalMoney: 6666,
				dynamicColor: '#8eba7b',
			}
		},
		methods: {
			enterUpdateInfo(index) {
				console.log(index);
			},
			navigateToOrder(index) {
				console.log(index)
				uni.navigateTo({
					url: '/pages/driver/driver_orders'
				});
			},
			navigateToPage(index) {
				console.log(index)
				let url;
				switch (index) {
					case 1:
						url = '/pages/driver/comment_list';
						break;
					case 2:
						url = '/pages/driver/driver_cars';
						break;
					default:
						console.error('Invalid index');
						return;
				}

				uni.navigateTo({
					url: url
				});
			},
			toUpdate() {
				uni.navigateTo({
					url: '/pages/driver/driver_info'
				});
			}
		}
	}
</script>

<style>
	.driver-center-container {
		padding: 20px;
	}

	u-avatar {
		margin-right: 10px;
		/* 设置间距 */
	}

	.text-update {
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #d3d3d3;
	}

	.user-info {
		background-color: #fafafa;
		/* border: 2px solid black; */
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
		border-radius: 5%;
		margin-bottom: 10px;
		display: flex;
		position: relative;
		/* flex-direction: column; */
		align-items: center;
		/* justify-content: center; */
		/* flex:1; */
	}

	.basic-info {
		display: flex;
		flex-direction: column;
		/* 垂直排列文本 */
	}

	.day-info {
		margin-bottom: 10px;
		background-color: #78b5ea;
		color: #ffffff;
		padding: 5px;
		border-radius: 8px;
		/* 圆角边框 */
		box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
	}

	.grid-text {
		margin-top: 5px;
	}

	.total-money {
		font-size: 18px;
		font-weight: bold;
		margin-left: 18px;
	}

	.server-card {
		margin-bottom: 10px;
		border: 1px solid #e0e0e0;
		/* 添加淡白色边框 */
		border-radius: 8px;
		/* 圆角边框 */
		background-color: #ffffff;
		/* 背景颜色 */
		padding: 5px 0;
	}

	.server-card-text {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
		margin-left: 10px;
	}
	.u-line{
		color: #d3d3d3;
		margin: 5px 0;
	}
</style>